<template>
  <div class="back-html">
    <div class="banner" style="background-image: url('http://img.linzhongyue.cn/red_moon.jpg')">
      <h1 class="banner-title">{{ title }}</h1>
    </div>
    <div class="back-body article-list-wrapper">
      <el-row>
        <el-col :lg="{span: 12}" :span="24" v-for="item of articleList" :key="item.id">
          <el-card class="article-item-card">
            <div class="article-item-cover">
              <router-link :to="'/articles/' + item.id">
                <!-- 缩略图 -->
                <el-image
                    class="on-hover"
                    width="100%"
                    height="100%"
                    :src="item.coverImage"
                />
              </router-link>
            </div>
            <div class="article-item-info">
              <!-- 文章标题 -->
              <div>
                <router-link :to="'/articles/' + item.id">
                  {{ item.title }}
                </router-link>
              </div>
              <div style="margin-top:0.375rem">
                <!-- 发表时间 -->
                <div style="float: left">
                  <i class="icon-shijian" style="color: #6d6969"></i>
                  {{ item.createTime.toString().split(" ")[0] }}
                </div>
                <div class="float-right">
                  <!-- 文章分类 -->
                  <router-link
                      :to="'/categories/' + item.categoryId"
                  >
                    <i class="icon-shuqian" style="color: #6d6969"></i>
                    {{ item.categoryName }}
                  </router-link>
                </div>
              </div>
            </div>
            <!--            <div class="tag-wrapper">-->
            <!--              <el-tag-->
            <!--                  v-for="tag of item.tags"-->
            <!--                  class="tag-btn"-->
            <!--              >-->
            <!--                {{ tag }}-->
            <!--              </el-tag>-->
            <!--            </div>-->
            <el-divider/>

          </el-card>
        </el-col>

      </el-row>
      <el-pagination
          v-model:currentPage="currentPage"
          v-model:page-size="pageSize"
          :page-sizes="[10,15,20]"
          :small="false"
          :disabled="false"
          :background="false"
          layout="total, sizes, prev, pager, next, jumper"
          :total="totalSize"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          style="margin-top: 20px;margin-left: 20px"
      />
    </div>
  </div>
</template>

<script lang="ts" setup>

import {onMounted, ref, watch} from "vue";
import {useRoute} from "vue-router";
import request from 'utils/request.js'

const articleList = ref([]);
const route = useRoute();
const title = ref('');
const currentPage = ref(1);
const pageSize = ref(10);
const totalSize = ref(0);


const getArticleByCategoryId = () => {
  request.get('/blog/getArticleByCategoryId', {
    params: {
      pageNum: currentPage.value,
      pageSize: pageSize.value,
      categoryId: route.params.categoryId
    }
  }).then((res: any) => {
    articleList.value = res.data.records
    totalSize.value = res.data.total
  })
}

const getArticleByTagId = () => {

  request.get('/blog/getArticleByTagId', {
    params: {
      pageNum: currentPage.value,
      pageSize: pageSize.value,
      tagId: route.params.tagId
    }
  }).then((res: any) => {
    articleList.value = res.data.records
    totalSize.value = res.data.total
  })

}

// 监听路由变化刷新页面
watch(() => route.path, () => {
  window.location.reload()
})
onMounted(() => {
  if (route.path.indexOf("/categories") !== -1) {
    title.value = '分类';
    getArticleByCategoryId()
  } else {
    title.value = '标签';
    getArticleByTagId()
  }
})

</script>

<style scoped lang="scss">
.back-html {
  margin: 0 10px 10px 10px;
}

.article-list-wrapper {
  max-width: 1106px;
  margin: 40px auto 1rem auto;
}

.article-item-card:hover {
  transition: all 0.3s;
  box-shadow: 0 4px 12px 12px rgba(7, 17, 27, 0.15);
}

.article-item-card:not(:hover) {
  transition: all 0.3s;
}

.article-item-card:hover .on-hover {
  transition: all 0.6s;
  transform: scale(1.1);
}

.article-item-card:not(:hover) .on-hover {
  transition: all 0.6s;
}

.article-item-info {
  line-height: 1.7;
  padding: 15px 15px 12px 18px;
  font-size: 15px;
}

@media (max-width: 759px) {
  .back-html {
    margin: 0 5px 5px 5px;
  }

  .article-list-wrapper {
    margin-top: 230px;
    padding: 0 12px;
  }
  .article-item-info {
    line-height: 1.7;
    padding: 15px 15px 12px 18px;
  }
}

.article-item-card {
  margin: 15px;
  border-radius: 8px !important;
  box-shadow: 0 4px 8px 6px rgba(7, 17, 27, 0.06);
}

.article-item-card a {
  transition: all 0.3s;
}

.article-item-cover {
  height: 220px;
  overflow: hidden;
}

.article-item-card a:hover {
  color: #8e8cd8;
}

.tag-wrapper {
  padding: 10px 15px 10px 18px;
}

.tag-wrapper a {
  color: #fff !important;
}

.tag-btn {
  display: inline-block;
  font-size: 0.725rem;
  line-height: 22px;
  height: 22px;
  border-radius: 10px;
  padding: 0 12px !important;
  background: linear-gradient(to right, #bf4643 0%, #6c9d8f 100%);
  opacity: 0.6;
  margin-right: 0.5rem;
}

.float-right {
  float: right;
}
</style>
